<template>
  <div class="task-list">
    <el-empty description="暂无数据" v-if="tasks.length == 0" />
    <template v-else>
      <div class="row head" style="padding-right: 58px">
        <div class="col" v-for="(item,index) in column" :style="stylenone(item,index)">{{ item }}</div>
      </div>
      <el-scrollbar>
        <div class="tbody" style="padding-right: 13px">
          <TaskItem
            v-for="item in tasks"
            :key="item.id"
            :task="item"
            :active="taskCode == item.task_code"
            :expand="store.task.expand == item.task_code" 
            @select="store.selectTask(item)"
            @expand="store.expandTask(item)"
          />
        </div>
      </el-scrollbar>
    </template>
  </div>
</template>
<script setup>
import TaskItem from './TaskItem.vue'

const emits = defineEmits(['click'])
const taskCode = defineModel({ type: String })

const props = defineProps({
  tasks: Array,
})

const { store } = inject('/home')

const column = ['', '状态', '平台', '代理', '会员', '联赛', '主队', '客队', '下单金额','用户']
// const column = ['状态', '平台', '代理', '会员', '联赛', '主队', '客队', '下单金额','用户']

const stylenone = (item,index) => {
  let str = ''
  if (item == '平台' || item == '代理' || item == '会员') {
    if (store.task.taskType == '_copy_order_hand' || store.task.taskType == '_copy_order_auto') {
      str += 'display: none;'
    } else {
      str += 'display: none;'
    }
  }
  if (index == 0) {
    str += "flex: 1;"
  } else {
    str += "flex: 1;"
  }
  return str
}
</script>
<style lang="scss" scoped>
.task-list {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.head {
  display: flex;
  color: #778090;
  line-height: 40px;
}

.row {
  display: flex;
}

.col {
  text-align: center;
  line-height: 44px;
  padding: 0 6px;
}
</style>
